<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>Go WebSocket 聊天室</title>
    <style>
        body { font-family: sans-serif; background: #f4f6f9; padding: 40px; max-width: 800px; margin: auto; }
        h2 { margin-bottom: 10px; }
        #chat {
            width: 100%; height: 300px; overflow-y: auto;
            border: 1px solid #ccc; background: #fff;
            padding: 10px; margin-bottom: 15px;
        }
        input, select, button {
            padding: 8px;
            margin: 5px 0;
            font-size: 14px;
        }
        #status { color: green; margin-bottom: 10px; }
    </style>
</head>
<body>
<h2>☑️ Go 群聊聊天室</h2>

<div>
    用户名：<input id="username" placeholder="输入用户名">
    <button onclick="connect()">连接</button>
    <span id="status"></span>
</div>

<div id="chat"></div>

<label for="commandSelect">✨ 选择操作：</label>
<select id="commandSelect" onchange="onCommandChange()">
    <option value="public">💬 公聊</option>
    <option value="private">📨 私聊</option>
    <option value="rename">🖋 修改昵称</option>
    <option value="who">🔍 查询在线</option>
    <option value="groupCreate">👥 创建群</option>
    <option value="groupJoin">➕ 加入群</option>
    <option value="groupSay">📣 群发消息</option>
</select>

<div id="inputArea"></div>

<button id="sendBtn" onclick="sendCommand()" disabled>发送</button>

<script>
    let socket;
    const chat = document.getElementById("chat");
    const status = document.getElementById("status");
    const sendBtn = document.getElementById("sendBtn");

    function log(message) {
        chat.innerHTML += `<div>${message}</div>`;
        chat.scrollTop = chat.scrollHeight;
    }

    function connect() {
        const name = document.getElementById("username").value.trim();
        if (!name) return alert("请输入用户名！");
        if (socket && socket.readyState === WebSocket.OPEN) {
            return alert("已经连接！");
        }

        socket = new WebSocket("ws://localhost:8888/ws?name=" + encodeURIComponent(name));

        socket.onopen = () => {
            log("✅ 已连接服务器");
            status.textContent = "（已连接）";
            status.style.color = "green";
            sendBtn.disabled = false;
        };

        socket.onmessage = event => {
            log(event.data);
        };

        socket.onclose = () => {
            log("❌ 连接已关闭");
            status.textContent = "（连接关闭）";
            status.style.color = "gray";
            sendBtn.disabled = true;
        };

        socket.onerror = err => {
            console.error(err);
            log("⚠️ 连接出错");
            status.textContent = "（连接失败）";
            status.style.color = "red";
            sendBtn.disabled = true;
        };
    }

    function onCommandChange() {
        const type = document.getElementById("commandSelect").value;
        const area = document.getElementById("inputArea");
        area.innerHTML = "";

        switch (type) {
            case "private":
                area.innerHTML = `
            <input placeholder="用户名" id="privateUser">
            <input placeholder="消息内容" id="privateMsg" onkeypress="enterSend(event)">`;
                break;
            case "rename":
                area.innerHTML = `<input placeholder="新昵称" id="newName" onkeypress="enterSend(event)">`;
                break;
            case "groupCreate":
            case "groupJoin":
                area.innerHTML = `<input placeholder="群名" id="groupName" onkeypress="enterSend(event)">`;
                break;
            case "groupSay":
                area.innerHTML = `
            <input placeholder="群名" id="groupName">
            <input placeholder="消息内容" id="groupMsg" onkeypress="enterSend(event)">`;
                break;
            case "public":
                area.innerHTML = `<input placeholder="聊天内容" id="publicMsg" onkeypress="enterSend(event)">`;
                break;
        }
    }

    function sendCommand() {
        const type = document.getElementById("commandSelect").value;
        let message = "";

        switch (type) {
            case "private":
                const user = document.getElementById("privateUser").value;
                const msg = document.getElementById("privateMsg").value;
                message = `to|${user}|${msg}`;
                break;
            case "rename":
                const newName = document.getElementById("newName").value;
                message = `rename|${newName}`;
                break;
            case "who":
                message = `who`;
                break;
            case "groupCreate":
                const g1 = document.getElementById("groupName").value;
                message = `group|create|${g1}`;
                break;
            case "groupJoin":
                const g2 = document.getElementById("groupName").value;
                message = `group|join|${g2}`;
                break;
            case "groupSay":
                const g3 = document.getElementById("groupName").value;
                const gmsg = document.getElementById("groupMsg").value;
                message = `group|say|${g3}|${gmsg}`;
                break;
            case "public":
                const pmsg = document.getElementById("publicMsg").value;
                message = pmsg;
                break;
        }

        if (message && socket.readyState === WebSocket.OPEN) {
            socket.send(message);
        }
    }

    function enterSend(e) {
        if (e.key === "Enter") sendCommand();
    }
</script>
</body>
</html>
